<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转圈圈</title>

    <!-- vue -->
    <script src="./assets/js-vue/vue.js"></script>
    <!--element-->
    <link rel="stylesheet" type="text/css" href="./assets/js-vue/element/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <script src="./assets/js-vue/element/index.js"></script>
    <script type="text/javascript" src="./assets/jquery-3.6.1.min.js"></script>
    <!--公共方法-->
    <script type="text/javascript" src="./utils/common.js"></script>
    <!--请求封装-->
    <script type="text/javascript" src="utils/myAjax.js"></script>

    <style>
        .container{
            /**/

        }

        .box{
            position: absolute;

        }

        .title{
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }


    </style>


</head>
<body>

<!--'margin-left':item._left + 'px','margin-top':item._top + 'px'-->
    <div id="app">
        <div>  <el-button type="primary" @click=" start()">开始</el-button></div>
            <div class="container">
                <div style="display: flex;align-items: flex-end">
                    <div v-for="item in dataList" :style="{width:item._width +'px',height:item._height + 'px','background-color':item._color,left:item._left + 'px',top:item._top + 'px'}" class="box">
                        <span class="title" :style="{height:item._height + 'px'}">{{item.id}}</span>
                    </div>
                </div>
            </div>
    </div>


<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data(){
            return{
                top:'50%',
                left:'50%',
                light:0,
                dataList:[],
            }
        },
        created(){
            this.list();

        },
        methods:{
            start(){
                //长高
                let that = this;
                let interval = setInterval(()=>{
                    this.dataList.forEach((item)=>{
                        item._height ++ ;
                    })
                    this.dataList = [...this.dataList]
                }, 100);

            },
            list(){
                let that = this;
                sendAjaxNoToken("/exam/list","POST").then((res)=>{
                    if(res.data && res.data.length > 0 ){
                        that.dataList = res.data;
                        console.log(this.dataList)
                    }else {
                        that.dataList = [];
                        this.$message.error("查询失败");
                    }
                })
            }
        }
    })

</script>



</body>
</html>